<template>
  <div class="app-wrapper" :class="{ 'is-collapsed': isSidebarCollapsed }">
    <!-- 侧边栏 -->
    <sidebar class="sidebar-container" />
    
    <!-- 主容器 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <navbar />
      
      <!-- 标签栏 -->
      <!-- <tags-view /> -->
      
      <!-- 主要内容区 -->
      <app-main />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Sidebar from './components/Sidebar/index.vue'
import Navbar from './components/Navbar.vue'
import TagsView from './components/TagsView.vue'
import AppMain from './components/AppMain.vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const isSidebarCollapsed = computed(() => appStore.sidebarCollapsed)
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  
  &.is-collapsed {
    .sidebar-container {
      width: 64px;
    }
    
    .main-container {
      margin-left: 64px;
    }
  }
}

.sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 210px;
  height: 100%;
  // background-color: var(--bg-color);
  border-right: 1px solid var(--border-color);
  transition: width 0.3s;
  z-index: 1001;
  overflow: hidden;
}

.main-container {
  min-height: 100%;
  transition: margin-left 0.3s;
  margin-left: 210px;
  position: relative;
}
</style> 